<template>
	<view class="fui-wrap">
		<fui-form error-position="1" labelColor="#7a7a7a" ref="form" top="0" :show="false">
			<fui-form-item label="申请时间">
				<fui-input readonly :borderBottom="false" :padding="[0]" :value="detail.createtime"></fui-input>
			</fui-form-item>
			<fui-form-item label="停车类型">
				<fui-input readonly :borderBottom="false" :padding="[0]" :value="type_txt[detail.apply_type]"></fui-input>
			</fui-form-item>
			<fui-form-item label="车辆信息" prop="plates" asterisk :bottomBorder="false"></fui-form-item>
			<view class="plates">
				<view class="line">
					<fui-text :text="formData.plates.plate_number" color="black" :size="28"></fui-text>
					<fui-text :text="plate_type[formData.plates.plate_type]" color="black" :size="28"></fui-text>
					<fui-text :text="car_models[formData.plates.car_models]" color="black" :size="28"></fui-text>
					<fui-text v-if="detail.status===0" @click="showEditPlates=true;" text="修改" color="blue" :size="28" decoration="underline"></fui-text>
				</view>
			</view>
			<fui-form-item label="车主姓名" asterisk prop="contact">
				<fui-input placeholder="请输入车主姓名" :borderBottom="false" :padding="[0]" v-model="formData.contact"></fui-input>
			</fui-form-item>
			<fui-form-item label="手机号" asterisk prop="mobile">
				<fui-input placeholder="请输入手机号" :borderBottom="false" :padding="[0]" v-model="formData.mobile"></fui-input>
			</fui-form-item>
			<fui-form-item v-for="(item,key) in remark" :key="key" :label="key" asterisk prop="mobile">
				<fui-input readonly :borderBottom="false" :padding="[0]" :value="item"></fui-input>
			</fui-form-item>
			<fui-form-item label="审核状态">
				<fui-tag v-if="detail.status===0" text="申请中" type="warning"></fui-tag>
				<fui-tag v-if="detail.status===1" text="已同意" type="success"></fui-tag>
				<fui-tag v-if="detail.status===2" text="已拒绝" type="danger"></fui-tag>
			</fui-form-item>
			<view class="fui-btn__box" v-if="detail.status===0">
				<fui-button type="success" :disabled="disabledButton" text="通过" bold @click="submit(1)"></fui-button>
				<fui-button type="danger" :disabled="disabledButton" text="拒绝" bold @click="submit(0)"></fui-button>
			</view>
		</fui-form>
		<fui-picker z-index="999" :fields ="['title','id']" :layer="1" :linkage="true" :options="parseColumns(car_models)" v-if="showCarModels" :show="showCarModels" @change="changePicker" @cancel="cancelPicker"></fui-picker>
		<fui-picker z-index="999" :fields ="['title','id']" :layer="1" :linkage="true" :options="parseColumns(plate_type)" v-if="showPlateType" :show="showPlateType" @change="changePicker" @cancel="cancelPicker"></fui-picker>
		<fui-modal width="600" :show="showEditPlates" @click="clickButton">
			<fui-form error-position="1" labelColor="#7a7a7a" top="0" :model="formData.plates">
				<fui-form-item label="车牌号" prop="plate_number">
					<fui-input readonly :borderBottom="false" :padding="[0]" placeholder="请输入车牌号" :value="formData.plates.plate_number"></fui-input>
				</fui-form-item>
				<fui-form-item label="车牌颜色" arrow prop="plate_type">
					<fui-input readonly @click="showPlateType=true" :borderBottom="false" :padding="[0]" :value="plate_type[formData.plates.plate_type]"></fui-input>
				</fui-form-item>
				<fui-form-item label="车辆类型" arrow prop="car_models">
					<fui-input readonly @click="showCarModels=true" :borderBottom="false" :padding="[0]" :value="car_models[formData.plates.car_models]"></fui-input>
				</fui-form-item>
			</fui-form>
		</fui-modal>
	</view>
</template>

<script>
	import {methods} from '@/utils/core.js';
	import {parseNumber} from '@/utils/util.js'
	export default {
		data() {
			return {
				car_models:'',
				plate_type:'',
				type_txt:{
					month_apply:'申请月卡',
					month_xufee:'过期月卡申请续费',
					day_apply:'申请日租卡',
					day_renew:'过期日租卡续期',
					stored_apply:'申请储值卡'
				},
				detail:'',
				formData:{
					apply_id:'',
					contact:'',
					mobile:'',
					plates:{}
				},
				remark:{},
				showEditPlates:false,
				showPlateType:false,
				showCarModels:false,
				disabledButton:false
			}
		},
		onLoad(e) {
			this.$get('parking/cars/apply-detail',{apply_id:e.apply_id},true).then(res=>{
				this.detail=res.detail;
				this.car_models=res.car_models;
				this.plate_type=res.plate_type;
				if(res.detail.remark){
					this.remark=JSON.parse(res.detail.remark);
				}
				this.formData={
					apply_id:this.detail.id,
					contact:this.detail.contact,
					mobile:this.detail.mobile,
					plates:{
						plate_number:this.detail.plate_number,
						plate_type:'blue',
						car_models:'car'
					}
				};
			});	
		},
		methods: {
			...methods,
			parseNumber,
			changePicker:function(e){
				if(this.showPlateType){
					this.formData.plates.plate_type=e.value;
					this.showPlateType=false;
				}
				if(this.showCarModels){
					this.formData.plates.car_models=e.value;
					this.showCarModels=false;
				}
			},
			cancelPicker:function(){
				this.showPlateType=false;
				this.showCarModels=false;
			},
			parseColumns:function(data){
				let r=[];
				for(let key in data){
					r.push({
						id:key,
						title:data[key]
					});
				}
				return r;
			},
			clickButton:function(e){
				if(e.index){
					if(!this.formData.plates.plate_number){
						this.$msg('车牌号不能为空');
						return;
					}
					this.showEditPlates=false;
				}else{
					this.showEditPlates=false;
				}
			},
			submit:function(i){
				uni.showModal({
					title:'您确定要'+(i?'通过':'拒绝')+'该申请吗？',
					success: (e) => {
						let status=[2,1];
						if(e.confirm){
							let rules = [
								{
									name: "contact",
									rule: ["required","isChinese"],
									msg: ["请输入联系人","请输入正确的人名"]
								},
								{
									name: "mobile",
									rule: ["required","isMobile"],
									msg: ["请输入车主手机号","手机号格式正确"]
								}
							];
							this.disabledButton=true;
							this.$refs.form.clearValidate();
							this.$refs.form.validator(this.formData,rules,true).then(res => {
								if(res.isPassed) {
									this.$post('parking/cars/do-apply',{...this.formData,status:status[i]},true,true).then(res=>{
										uni.setStorageSync('refresh',1);
										this.$navigateBack(1500);
									}).catch(err=>{
										this.disabledButton=false;
									});
								}else{
									this.disabledButton=false;
								}
							}).catch(err => {
								this.disabledButton=false;
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.plus{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.plates{
	background-color: #fff;
	border-bottom: 1px solid #EEEEEE;
	padding: 30rpx;
	padding-top: 0;
	.line{
		display: flex;
		justify-content: space-between;
		background-color: #afe9f4;
		padding: 20rpx;
	}
}
.fui-btn__box{
	padding: 20rpx;
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	height: 220rpx;
	justify-content: space-between;
}
</style>